<div class="game-container">
    <div class="game-info">
        <span>得分: <span id="whackScore">0</span></span>
        <span>时间: <span id="whackTime">30</span>s</span>
    </div>
    <div class="whack-grid">
        <div class="whack-hole" onclick="whackMole(0)">
            <div class="whack-mole" id="mole0"></div>
        </div>
        <div class="whack-hole" onclick="whackMole(1)">
            <div class="whack-mole" id="mole1"></div>
        </div>
        <div class="whack-hole" onclick="whackMole(2)">
            <div class="whack-mole" id="mole2"></div>
        </div>
        <div class="whack-hole" onclick="whackMole(3)">
            <div class="whack-mole" id="mole3"></div>
        </div>
        <div class="whack-hole" onclick="whackMole(4)">
            <div class="whack-mole" id="mole4"></div>
        </div>
        <div class="whack-hole" onclick="whackMole(5)">
            <div class="whack-mole" id="mole5"></div>
        </div>
        <div class="whack-hole" onclick="whackMole(6)">
            <div class="whack-mole" id="mole6"></div>
        </div>
        <div class="whack-hole" onclick="whackMole(7)">
            <div class="whack-mole" id="mole7"></div>
        </div>
        <div class="whack-hole" onclick="whackMole(8)">
            <div class="whack-mole" id="mole8"></div>
        </div>
    </div>
    <div class="game-controls">
        <button class="btn btn-primary" onclick="startWhack()">开始游戏</button>
    </div>
</div>

<script>
let whackGame = {
    score: 0,
    timeLeft: 30,
    gameRunning: false,
    activeMole: null,
    gameTimer: null,
    moleTimer: null
};

function initWhack() {
    whackGame.score = 0;
    whackGame.timeLeft = 30;
    whackGame.gameRunning = false;
    
    updateDisplay();
    hideAllMoles();
}

function startWhack() {
    if (whackGame.gameRunning) return;
    
    whackGame.score = 0;
    whackGame.timeLeft = 30;
    whackGame.gameRunning = true;
    
    updateDisplay();
    startMole();
    
    whackGame.gameTimer = setInterval(() => {
        whackGame.timeLeft--;
        updateDisplay();
        
        if (whackGame.timeLeft <= 0) {
            endWhack();
        }
    }, 1000);
}

function startMole() {
    if (!whackGame.gameRunning) return;
    
    hideAllMoles();
    
    const randomMole = Math.floor(Math.random() * 9);
    whackGame.activeMole = randomMole;
    
    const mole = document.getElementById(`mole${randomMole}`);
    mole.style.display = 'block';
    mole.classList.add('active');
    
    const duration = Math.max(500, 1500 - whackGame.score * 10);
    
    whackGame.moleTimer = setTimeout(() => {
        if (whackGame.gameRunning) {
            startMole();
        }
    }, duration);
}

function whackMole(index) {
    if (!whackGame.gameRunning || index !== whackGame.activeMole) return;
    
    whackGame.score += 10;
    updateDisplay();
    
    // 隐藏当前地鼠
    const mole = document.getElementById(`mole${index}`);
    mole.style.display = 'none';
    mole.classList.remove('active');
    
    // 立即开始下一个
    clearTimeout(whackGame.moleTimer);
    setTimeout(startMole, 100);
}

function hideAllMoles() {
    for (let i = 0; i < 9; i++) {
        const mole = document.getElementById(`mole${i}`);
        mole.style.display = 'none';
        mole.classList.remove('active');
    }
}

function updateDisplay() {
    document.getElementById('whackScore').textContent = whackGame.score;
    document.getElementById('whackTime').textContent = whackGame.timeLeft;
}

function endWhack() {
    whackGame.gameRunning = false;
    
    if (whackGame.gameTimer) {
        clearInterval(whackGame.gameTimer);
    }
    if (whackGame.moleTimer) {
        clearTimeout(whackGame.moleTimer);
    }
    
    hideAllMoles();
    
    const name = prompt(`时间到！得分：${whackGame.score}\n请输入你的名字：`);
    if (name && name.trim()) {
        submitScore('whack', name.trim(), whackGame.score);
    }
    
    initWhack();
}

// 初始化
initWhack();
</script>

<style>
.whack-mole {
    display: none;
    background: #8b4513;
    border: 2px solid #654321;
}

.whack-mole.active {
    background: #d2691e;
    transform: translate(-50%, -50%) scale(1.1);
}

.whack-hole {
    transition: all 0.2s;
}

.whack-hole:hover {
    transform: scale(1.05);
}
</style>